<template>
    <div class="branding-render">
        <canvas ref="background"></canvas>
        <figure :style="style"><canvas ref="canvas"></canvas></figure>
        <UxLoading v-show="loading" />
    </div>
</template>
<script>
import { fabric as Fabric } from "fabric";
import DesignEditor from "@/utils/DesignEditor.js";
import DesignResource from "@/utils/DesignResource.js";
export default {
    name: "UserBrandingRender",
    props: { piece: { type: Object } },
    data () {
        return {
            cache: '',
            scale: 1,
            editor: null,
            style: null,
            loading: true,
        };
    },
    watch: {
        piece: {
            immediate: false,
            deep: true,
            handler (newval, oldval) {
                this.updatePiece();
            },
        }
    },
    methods: {
        setStyle () {
            const piece = this.piece;
            this.style = {
                width: 100 * (piece.canvas_width / piece.outer_width) + "%",
                height: 100 * (piece.canvas_height / piece.outer_height) + "%",
                left: 100 * (piece.canvas_left / piece.outer_width) + "%",
                top: 100 * (piece.canvas_top / piece.outer_height) + "%",
            }
        },
        updateBackground (image) {

            const canvas = this.$refs.background;
            const piece = this.piece;

            if (!canvas || !piece) {
                // 没有内容，不管
            } else if (canvas.cache == piece.mask_image) {
                // 数据相同，且已经完成
            } else {
                const ctx = canvas.getContext("2d");
                canvas.cache = piece.mask_image;
                canvas.width = this.scale * piece.outer_width;
                canvas.height = this.scale * piece.outer_height;
                ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
            }
        },

        // 更新打印区
        updatePiece () {
            let cache = JSON.stringify(piece);
            let piece = this.piece;
            if (!this.$el || !piece) {
                // 没有内容，不管
            } else if (this.cache == cache) {
                // 数据相同，且已经完成
            } else if (this.editor) {
                // 初始化了
                this.editor.renderLayers(piece.layers)
            } else {
                let option = {
                    canvas_name: piece.canvas_name,
                    canvas_scale: this.scale,
                    canvas_model: "simple",
                    canvas_width: piece.canvas_width,
                    canvas_height: piece.canvas_height,
                    design_layers: [],
                };
                this.editor = new DesignEditor(Fabric, this.$refs.canvas, option);
                this.editor.renderLayers(piece.layers);
            }
        },
        init () {
            const rect = this.$el.getBoundingClientRect();
            const piece = this.piece;
            // const image = (piece.layers || [])[0] || {}

            const option = { type: "simple", form: "materials" }
            const promises = [];


            this.scale = 2 * Math.max(rect.width / piece.outer_width, rect.height / piece.outer_height);
            this.setStyle();

            piece.mask_image && promises.push(DesignResource.loadImage(piece.mask_image));
            piece.layers.forEach(layer => {
                if (layer.type == 'image' && layer.url) {
                    promises.push(DesignResource.loadImage(layer.url, option));
                }
            });

            this.loading = true;

            Promise.all(promises).then(result => {
                piece.mask_image && this.updateBackground(result[0]);
                this.updatePiece();
                this.loading = false;
            })


            // if (!image || !image.url) {
            //     // 没有
            //     this.updatePiece(true);
            //     this.loading = false;
            // } else if (DesignResource.getImageByCache(image.url, option)) {
            //     // 已经加载
            //     this.updatePiece(true);
            //     this.loading = false;
            // } else {
            //     // 未加载
            //     DesignResource.loadImage(image.url, option).then(result => {
            //         this.updatePiece(true);
            //         this.loading = false;
            //     }).catch(error => {
            //         this.updatePiece(true);
            //         this.loading = false;
            //     })
            // }

        },
        resize () {
            // this.init();
        }
    },
    mounted () {
        this.init();
    }
};
</script>
<style lang="scss" scoped>
.branding-render {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    figure {
        position: absolute;
        width: 100%;
        height: 100%;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px dashed #239ac2;
            box-sizing: border-box;
            z-index: 2;
        }
    }

    canvas {
        position: absolute;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}
</style>
